<template>

    <div class="center-box class-box dl-row-sb start mar-top mar-bottom">
        <div class="left main-box dl-sticky">
            <div v-for="(item, index) in tabBars" :key="index" class="w-[100%] py-3 px-10 cursor-pointer"
                 :class="tabIndex === index ? 'bg-blue-500 text-white' : ''" @click="handleTabClick(item, index)">
                <span>{{ item.name }}</span>
            </div>
        </div>
        <div class="right">
            <template v-if="tabIndex === 0">
                <div class="main-box"  v-loading="loading">
                    <el-tabs v-model="activeName" @tab-click="handleClick" class="tab-class">
                        <el-tab-pane label="待考试" name="first">

                            <ul class="examination-box dl-row" v-if="toDoCheckList.length>0">
                                <li class="item" v-for="(check,index) in toDoCheckList" :key="index">
                                    <h1>{{check.checkName}}</h1>
                                    <div class="time dl-row-sb end">
                                        <div>
                                            <p>开始时间：{{check.startTime}}</p>
                                            <p>结束时间：{{check.endTime}}</p>
                                        </div>
                                        <el-button type="danger" @click="routeClick(check.id)" round size="small" v-if="check.isStart===1">参加考试
                                        </el-button>
										<el-button type="info" round size="small" :key="1" disabled v-if="check.isStart===2">已结束
										</el-button>
										<el-button type="info" round size="small" :key="2" disabled  v-if="check.isStart===-1">未开始
										</el-button>
                                    </div>
                                </li>
                            </ul>
								<ul v-if="toDoCheckList.length==0 && !loading">
									<el-empty :image-size="250" style="height: 250px;" :image="require('../../assets/no_data_images/no_exam.png')" ></el-empty>
								</ul>
                            <div>
                                <h1 class="text-xl mar-top">考试安排</h1>
                                <div class="dl-row-sb calendar-box">
                                    <div class="border-main calendar">
                                        <el-calendar ref="calender">
                                            <template
                                                    slot="dateCell"
                                                    slot-scope="{date,data}">
                                                <p :class="{ selected : isSelected(date, data) }"
                                                   @click="queryExam(data)">
                                                    {{data.day.split('-').slice(2).join('-')}}
                                                    <i v-if="isSelected(date, data)" class=""></i>
                                                </p>
                                            </template>
                                        </el-calendar>
                                    </div>
                                    <div class="border-main calendar-right">
                                        <div class="title dl-row">
                                            <h5>{{dateNow}}</h5>
                                            <p>考试安排如下:</p>
                                        </div>
                                        <ul v-if="todayCheckList.length>0">
                                            <li class="calendar-item" v-for="(check,index) in todayCheckList"
                                                :key="index">
                                                <div class="dl-row-sb">
                                                    <h1>{{check.checkName}}</h1>
                                                    <el-button type="danger" round size="small"
                                                               v-if="check.isStart===1"
                                                               @click="routeClick(check.id)" plain>参加考试
                                                    </el-button>
													<el-button type="info" round size="small" :key="1" disabled
													           v-if="check.isStart===2" plain>已结束
													</el-button>
													<el-button type="info" round size="small" :key="2" disabled
													           v-if="check.isStart===-1" plain>未开始
													</el-button>
                                                </div>
                                                <div class="time dl-row">
                                                    <span>开始时间：{{check.startTime}}</span>
                                                    <span>结束时间：{{check.endTime}}</span>
                                                </div>
                                            </li>
                                        </ul>
										<ul v-if="todayCheckList.length==0 && !loading">
											<el-empty class="empty" description="无考试安排" :image-size="200"  :image="require('../../assets/no_data_images/no_exam.png')" ></el-empty>
										</ul>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="待竞赛" name="second">
                            <ul class="examination-box dl-row">
                                <li class="item" v-for="(check,index) in toDoCheckList" :key="index">
                                    <h1>{{check.checkName}}</h1>
                                    <div class="time dl-row-sb end">
                                        <div>
                                            <p>开始时间：{{check.startTime}}</p>
                                            <p>结束时间：{{check.endTime}}</p>
                                        </div>
                                        <el-button type="danger" @click="routeClick(check.id)" round size="small" v-if="check.isStart===1">参加考试
                                        </el-button>
										<el-button type="info" round size="small" :key="1" v-if="check.isStart===2" disabled plain>已结束
										           
										</el-button>
										<el-button type="info" round size="small"  :key="2"
										           v-if="check.isStart===-1"  disabled plain>未开始
										</el-button>
                                    </div>
                                </li>
                            </ul>
							<ul v-if="toDoCheckList.length==0">
							    <el-empty :image-size="250" style="height: 350px;" :image="require('../../assets/no_data_images/no_exam.png')" ></el-empty>
							</ul>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>
            <template v-if="tabIndex === 1">
                <check-record ref="chRecord"/>
            </template>
            <template v-if="tabIndex === 2">
                <collect ref="colList"/>
            </template>
            <template v-if="tabIndex === 3">
                <error-question ref="errQue"/>
            </template>
            <template v-if="tabIndex === 4">
                <exam-statistics ref="examSt"/>
            </template>
            <template v-if="tabIndex === 5">
                <competition ref="compet"/>
            </template>
        </div>
		<bay-window></bay-window>
    </div>
</template>

<script>
    import {getUserCheck} from '@/api/check'
    import {getNowFormatDate} from '@/utils/index'
    import collect from "./components/collect";
    import errorQuestion from "./components/errorQuestion";
    import checkRecord from "./components/checkRecord";
    import examStatistics from "./components/examStatistics";
    import competition from "./components/competition";
	import bayWindow from '../../components/bayWindow';

    export default {
        name: "exam",
        components: {collect, errorQuestion, checkRecord,examStatistics,competition,bayWindow},
        data() {
            return {
				loading:false,
                inputSearch: '',
                userImg: require('../../assets/image/u353.png'),
                firstImg: require('../../assets/image/first.png'),
                secondImg: require('../../assets/image/second.png'),
                thirdImg: require('../../assets/image/third.png'),
                activeName: 'first',
                tabIndex: 0,
                date: new Date(),
                tabBars: [
                    {
                        name: '考试',
                    },
                    {
                        name: '考试记录',
                    },
                    {
                        name: '收藏',
                    },
                    {
                        name: '错题集',
                    },
                    {
                        name: '考试数据',
                    },
                    {
                        name: '竞赛数据',
                    },
                ],
                dateNow: '',
                checkType: 1,
                toDoCheckList: [],
                todayCheckList: [],
                checkDate: []
            }
        },
        created() {
            this.$nextTick(() => {
                this.findUserCheck()
                this.queryExam()
            })
        },
        methods: {
            findUserCheck() {
                const params = {type: this.checkType}
                getUserCheck(params).then(data => {
                    this.toDoCheckList = data.toDoCheckList
                    if (this.checkType === 1) {
                        this.checkDate = data.checkDate
                    }
                })
            },
            queryExam(slotData) {
				this.loading=true;
                const params = {type: this.checkType}
                if (slotData != null) {
                    params.date = slotData.day
                } else {
                    params.date = getNowFormatDate()
                }
                getUserCheck(params).then(data => {
                    this.todayCheckList = data.toDoCheckList
                })
                this.getYmd(params.date)
				setTimeout(()=> {
					this.loading = false
				}, 300);
            },
            getYmd(date) {
                const reg = /(\d{4})\-(\d{2})\-(\d{2})/; // eslint-disable-line
                this.dateNow = date.replace(reg, "$1年$2月$3日");
            },
            isSelected(slotDate, slotData) {
                if (this.checkDate) {
                    return this.checkDate.includes(slotData.day)
                }
            },
            handleTabClick(row, index) {
                this.tabs = row.tabs
                //this.activeName = 'all'
                this.tabIndex = index
                this.cureentName = row.name
                if (this.tabIndex === 1) {
                    this.$nextTick(() => {
                        this.$refs.type = 1;
                        this.$refs.chRecord.init()
                    });
                }
                if (this.tabIndex === 2) {
                    this.$nextTick(() => {
                        this.$refs.colList.init()
                    });
                }
                if (this.tabIndex === 3) {
                    this.$nextTick(() => {
                        this.$refs.errQue.init()
                    });
                }
                if (this.tabIndex === 4) {
                    this.$nextTick(() => {
                        this.$refs.examSt.findExamStatistics()
                    });
                }
                if (this.tabIndex === 5) {
                    this.$nextTick(() => {
                        this.$refs.compet.init()
                    });
                }
            },
            handleClick(tab, event) {
                if (this.activeName === 'first') {
                    this.checkType = 1
                } else if (this.activeName === 'second') {
                    this.checkType = 2
                }
                this.findUserCheck()
            },
            routeClick(id) {
				this.$confirm('确定参加本次考试, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
				  this.$router.push({
				      path: "/exam/examDetails",
				      query: {id: id}
				  })
				}).catch(() => {
					
				});
            }
        }
    }
</script>

<style lang="scss">
    .el-calendar__header {
        padding-top: 18px;
    }

    .el-calendar__body {
        padding: 12px 20px 5px;
    }

    .el-calendar-table .el-calendar-day {
        box-sizing: border-box;
        height: 50px;
        padding: 0px;
        line-height: 50px;
        text-align: center;
    }

    .el-calendar-table .el-calendar-day > p.selected {
        background-color: #fef2f2;
        border-radius: 50px;
    }

    .el-calendar {
        background-color: #fff;
        margin-top: -12px;
    }

    .el-calendar__title {
        color: #000;
        align-self: center;
        font-weight: bold;
        font-size: 18px;
    }

    .el-calendar__header, .el-calendar-table td, .el-calendar-table tr td:first-child, .el-calendar-table tr:first-child td {
        border: none;
    }

    .el-calendar-table .el-calendar-day > p {
        border-radius: 50px;
        position: relative;
    }

    .el-calendar-table td.is-selected {
        background: #fef2f2;
        border-radius: 50px;
    }

    .el-backtop, .el-calendar-table td.is-today {
        background: #F45333;
        border-radius: 50px;
        color: #ffffff;
    }

    .el-calendar-table .el-calendar-day > p.selected i {
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #F45333;
        border-radius: 20px;
        position: absolute;
        left: 50%;
        margin-left: -2px;
        bottom: 5px;
    }

    .el-calendar-table .el-calendar-day {
        border-radius: 50px;
    }

    .el-calendar-table .el-calendar-day:hover {
        background: #fef2f2;
    }

    .el-backtop, .el-calendar-table td.is-today .el-calendar-day:hover {
        color: #ffffff;
        background: #F97960;
    }

</style>
<style lang="scss" scoped>
	.center-box{
		 min-height: calc(100vh - 254px);
	}
    .class-box {
        .left {
            width: 230px;
            padding: 25px 0;

            .bg-blue-500 {
                background: #0068B6;
            }

            .py-3 {
                margin-bottom: 5px;
            }

            span {
                font-size: 16px;
                font-weight: 400;
                color: #545C63;
            }

            .text-white span {
                color: #ffffff;
            }
        }

        .right {
            width: 1110px;
        }
    }

    .calendar-box {
        .calendar {
            width: 440px;
        }
    ;

        .calendar-right {
            width: 570px;

            .title {
                margin-bottom: 15px;

                h5 {
                    font-size: 18px;
                    font-weight: bold;
                    color: #333333;
                    margin-right: 20px;
                }

                p {
                    font-size: 18px;
                    color: #333333;
                }
            }

        }
    ;
    }

    .calendar-item {
        background: #FFF5F3;
        border-radius: 10px 10px 10px 10px;
        padding: 15px;
        margin-bottom: 15px;

        h1 {
            font-size: 18px;
            font-weight: bold;
            color: #F45333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 8px;
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .time {
            font-size: 12px;
            font-weight: 400;
            color: #545C63;
            line-height: 14px;

            span {
                margin-right: 15px;
            }
        }
    }

    .em-history-box {
        .title {
            margin-bottom: 15px;

            h1 {
                font-size: 18px;
                font-weight: bold;
                color: #333333;
                margin-right: 20px;
            }

            span {
                font-size: 12px;
                color: #999999;
            }
        }
    }
</style>
